<!doctype html>
<html>
    <head>
        <title>HT 流动线手册</title>
        <meta charset="UTF-8">    
        <meta name="viewport" content="user-scalable=yes, width=1024">
        <style type="text/css"> 
            h1, h2, h3, h4, h5, h6, p, blockquote {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", Arial, sans-serif;
                font-size: 13px;
                line-height: 18px;
                color: #737373;
                background-color: white; 
                margin: 10px 13px 10px 13px;
            }
            table {
                margin: 10px 0 15px 0;
                border-collapse: collapse;
            }
            td,th {	
                border: 1px solid #ddd;
                padding: 3px 10px;
            }
            th {
                padding: 5px 10px;	
            }
            a {
                color: #0069d6;
            }
            a:hover {
                color: #0050a3;
                text-decoration: none;
            }
            a img {
                border: none;
            }
            p {
                margin-bottom: 9px;
            }
            h1, h2, h3, h4, h5, h6 {
                color: #404040;
                line-height: 36px;
            }
            h1 {
                margin-bottom: 18px;
                font-size: 30px;
            }
            h2 {
                font-size: 24px;
            }
            h3 {
                font-size: 18px;
            }
            h4 {
                font-size: 16px;
            }
            h5 {
                font-size: 14px;
            }
            h6 {
                font-size: 13px;
            }
            hr {
                margin: 0 0 19px;
                border: 0;
                border-bottom: 1px solid #ccc;
            }
            blockquote {
                padding: 13px 13px 21px 15px;
                margin-bottom: 18px;
                font-family:georgia,serif;
                font-style: italic;
            }
            blockquote:before {
                content:"\201C";
                font-size:40px;
                margin-left:-10px;
                font-family:georgia,serif;
                color:#eee;
            }
            blockquote p {
                font-size: 14px;
                font-weight: 300;
                line-height: 18px;
                margin-bottom: 0;
                font-style: italic;
            }
            code, pre {
                font-family: Monaco, Andale Mono, Courier New, monospace;
            }
            code {
                background-color: #fee9cc;
                color: rgba(0, 0, 0, 0.75);
                padding: 1px 3px;
                font-size: 12px;
                border-radius: 3px;
            }
            pre {
                display: block;
                padding: 14px;
                margin: 0 0 18px;
                line-height: 16px;
                font-size: 11px;
                border: 1px solid #d9d9d9;
                white-space: pre-wrap;
                word-wrap: break-word;
            }
            pre code {
                background-color: #fff;
                color:#737373;
                font-size: 11px;
                padding: 0;
            }
            sup {
                font-size: 0.83em;
                vertical-align: super;
                line-height: 0;
            }
            * {
                -webkit-print-color-adjust: exact;
            }
            @media screen and (min-width: 914px) {
                body {
                    width: 854px;
                    margin:10px auto;
                }
            }
            @media print {
                body,code,pre code,h1,h2,h3,h4,h5,h6 {
                    color: black;
                }
                table, pre {
                    page-break-inside: avoid;
                }
            }                        
            iframe{
                width: 100%;
                border: 1px solid #34495E;
                margin: 0;                
            }            
            .logo{
                vertical-align: middle;
            }

        </style>        
        <script>
            function init() {
                var logoSrc = '',
                    logos = document.querySelectorAll('.logo'),
                    i = 0;
                for (; i < logos.length; i++) {
                    logos[i].src = logoSrc;
                }
                
                var iframes = document.querySelectorAll('iframe'),
                    func = function(){};
                for (i=0; i < iframes.length; i++) {
                    var iframe = iframes[i];
                    
                    // a small hack to make it work on android
                    iframe.ontouchstart = func;
                    
                    var div = document.createElement('div');
                    div.innerHTML = '<a href="' + iframe.src + '" target="_blank">独立运行→</a>';
                    iframe.parentNode.insertBefore(div, iframe);
                }   
            }
        </script>    
    </head>
    <body onload="init();">
        <a href="http://www.hightopo.com"><img class="logo"></a>HT 流动线手册
        <hr style="margin: 1px 0 20px 0">
<p>索引</p>

<ul><li><a href="#ref_description">概述</a></li><li><a href="#ref_demo1">示例一：综合示例</a></li><li><a href="#ref_demo2">示例二：公交线路图</a></li><li><a href="#ref_demo3">示例三：与其它插件集成</a></li></ul>

<hr/>

<div id="ref_description"></div>

<h3>概述</h3>

<p>流动线插件可以在<code>ht.Shape</code>和<code>ht.Edge</code>上增加流动效果，支持内部流动元素或用户自定义的流动元素沿着路径步进，而且没有引入新的类，
只是在<code>ht.Shape</code>、<code>ht.Edge</code>和<code>ht.graph.GraphView</code>上扩展了一些方法或样式，因此非常易于使用。要使用此插件，只需要引入<code>ht-flow.js</code>文件：</p>

<pre><code>&lt;script src=&quot;ht.js&quot;&gt;&lt;/script&gt; &lt;!--先引入ht.js--&gt;
&lt;script src=&quot;ht-flow.js&quot;&gt;&lt;/script&gt;</code></pre>

<p>此插件在<code>ht.Shape</code>和<code>ht.Edge</code>类上扩展了一些样式控制流动效果，用户可以通过<code>ht.Shape#setStyle</code>和<code>ht.Edge#setStyle</code>操作这些样式，
说明如下：</p>

<ul><li><code>flow</code> 值为<code>true</code>或<code>false</code>，控制此<code>ht.Shape</code>或<code>ht.Edge</code>是否可流动， 默认值为<code>false</code></li><li><code>flow.reverse</code> 值为<code>true</code>或<code>flase</code>，控制反向流动，默认值为<code>false</code></li><li><code>flow.autoreverse</code> 值为<code>true</code>或<code>flase</code>，正向流动和反向流动是否交替进行，默认值为<code>false</code></li><li><code>flow.count</code> 控制流动组的个数，默认为<code>1</code></li><li><code>flow.step</code> 控制流动的步进，默认为<code>3</code></li><li><code>flow.element.count</code> 每个流动组中的元素的个数，默认为<code>10</code></li><li><code>flow.element.background</code> 流动组中元素的背景颜色，默认为<code>rgba(255, 255, 114, 0.4)</code></li><li><code>flow.element.max</code> 流动组中最大元素的尺寸，默认为<code>7</code></li><li><code>flow.element.min</code> 流动组中最小元素的尺寸，默认为<code>0</code>;每个流动组中的元素的尺寸从<code>flow.element.max</code>递减至<code>flow.element.min</code>，
如果希望元素尺寸保持一致，将这两个参数设为一致即可。</li><li><code>flow.element.space</code> 流动组中元素的间隔，默认为<code>3.5</code></li><li><code>flow.element.autorotate</code> 值为<code>true</code>或<code>false</code>，控制流动组中的元素是否与路径的方向保持一致，默认为<code>false</code></li><li><code>flow.element.image</code> 字符串类型，指定流动组中元素的图片，图片需要提前通过<code>ht.Default.setImage</code>注册</li><li><code>flow.element.shadow.visible</code> 值为<code>true</code>或<code>false</code>，控制流动组中的元素是否显示渐变阴影，默认为<code>true</code></li><li><code>flow.element.shadow.begincolor</code> 字符串类型，表示流动组中的元素的渐变阴影的中心颜色，默认为<code>rgba(255, 255, 0, 0.3)</code></li><li><code>flow.element.shadow.endcolor</code> 字符串类型，表示流动组中的元素的渐变阴影的边缘颜色，默认为<code>rgba(255, 255, 0, 0)</code></li><li><code>flow.element.shadow.max</code> 表示流动组中的最大元素的渐变阴影的尺寸，默认为<code>22</code></li><li><code>flow.element.shadow.min</code> 表示流动组中的最小元素的渐变阴影的尺寸，默认为<code>4</code></li></ul>

<p><code>ht.graph.GraphView</code>上扩展的<code>API</code>如下：</p>

<ul><li><code>enableFlow(interval)</code> 启动流动，默认为<code>false</code>，<code>interval</code>表示流动的时间间隔</li><li><code>disableFlow()</code> 停止流动</li><li><code>flowInterval</code> 通过<code>setFlowInterval(interval)</code>和<code>getFlowInterval()</code>操作，控制流动的时间间隔</li></ul>

<p>从上面的说明中可以看出，拓扑上的所有<code>Data</code>的流动的时间间隔是一样的，如果需要营造不同的<code>Data</code>流动速度不同的效果，可以修改相关<code>Data</code>的<code>flow.step</code>样式。</p>

<div id="ref_demo1"></div>

<h3>示例一：综合示例</h3>

<p>您可以操作下面的例子验证此插件：</p>

<p><iframe src="examples/example_demo1.html" style="height:400px"></iframe></p>

<p>上面的例子展示了如何使用流动样式，您可以通过源代码查看实现原理。</p>

<div id="ref_demo2"></div>

<h3>示例二：公交线路图</h3>

<p><iframe src="examples/example_demo2.html" style="height:300px"></iframe></p>

<p>您可以拖拽公交站调整线路。公交站用<code>ht.Node</code>实现，公交车用流动的图片来展示，因为公交站和线路是不同的节点，为了避免线路上的公交车被公交站遮挡，
使用了两个<code>Shape</code>来模拟线路和公交车：</p>

<ul><li><code>busLanePath</code> 展示公交车，公交车在它上面流动，自身并没有宽度，因此不可见，在最顶层展示</li><li><code>busLane</code> 展示线路，在最底层展示</li></ul>

<p>公交站节点通过<code>setHost(busLane)</code>固定在<code>busLane</code>的上面，然后通过<code>setLayer(1)</code>固定到<code>busLanePath</code>下面，就可以实现公交车在线路和公交站之上流动的效果。</p>

<p>另外，拖拽公交站时会调整<code>busLanePath</code>和<code>busLane</code>，所以需要监听公交站的位置信息变化，然后修改线路的<code>points</code>，由于站点是吸附到线路上的
，修改线路的<code>points</code>需要调用<code>ht.Default.getInternal().setIsolating(true);</code>，避免公交站和线路互相影响。</p>

<div id="ref_demo3"></div>

<h3>示例三：与其它插件集成</h3>

<p>无需做额外的处理，按照原来的方式使用插件各自的<code>API</code>即可，下面的例子里用到了<code>EdgeType</code>插件、自动布局插件及<code>Painter</code>机制：</p>

<p><iframe src="examples/example_demo3.html" style="height:500px"></iframe></p>

<p>这个例子里使用了全局的默认样式配置：</p>

<pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
    htconfig = {
         Style: {
             &#39;edge.color&#39;: &quot;black&quot;,
             &#39;flow&#39;: true,
             &#39;edge.offset&#39;: 0,
             &#39;flow.element.background&#39;: &quot;rgb(41, 249, 47)&quot;,
             &#39;flow.element.count&#39;: 1,
             &#39;flow.count&#39;: 2,
             &#39;flow.element.max&#39;: 10,
             &#39;flow.element.shadow.visible&#39;: false
         }
     };
 &lt;/script&gt;</code></pre>

<p>这种语法结构的详细信息可以参考<a href="../../core/theme/ht-theme-guide.html">Theme</a>文档</p>    <hr id="contact" style="margin: 20px 0 1px 0">
    <a href="http://www.hightopo.com"><img class="logo"></a>欢迎交流 <a href="mailto:service@hightopo.com">service@hightopo.com</a>
</body>
</html>
